<!DOCTYPE html>

<html
  xmlns="http://www.w3.org/1999/xhtml"
  $if(lang)$
  lang="$lang$"
  xml:lang="$lang$"
  $endif$
>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="pandoc" />
    <title>$mytitle$</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="Dataviz pitfall gallery | $mytitle$" />
    <meta
      name="keywords"
      content="Data,Dataviz,Datavisualization,Plot,Chart,Graph,R,Python,D3,Learning,Caveat,Pitfall,Mistake,Classification"
    />
    <meta name="author" content="Yan Holtz and Conor Healy" />
    <link
      rel="icon"
      href="https://raw.githubusercontent.com/holtzy/data_to_viz/master/img/logo/data-to-viz.ico"
    />

    <!-- Control appearance when share by social media -->
    <meta property="og:title" content="$mytitle$" />
    <meta
      property="og:image"
      content="https://raw.githubusercontent.com/holtzy/data_to_viz/master/img/parallax/caveat_gallery_overview.png"
    />
    <meta
      property="og:description"
      content="Dataviz pitfall gallery | $mytitle$"
    />
    <meta
      property="og:url"
      content="www.data-to-viz.com/caveat/$pathSlug$.html"
    />
    <meta property="og:type" content="website" />

    <style>
      .myheader {
        background-image: url("https://github.com/holtzy/data_to_viz/raw/master/img/parallax/paral_caveat.png");
          min-height: 350px;
          background-size: 100% 100%;

          /* Create the parallax scrolling effect */
          background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;


          height: 100%; !important;
          width: 100% !important;
        }
      .mytitle{
        text-transform: uppercase;
        font-family: 'Montserrat';
        font-size: 200%;
        font-weight: 500;
        letter-spacing: 4px;
        }
    </style>

    <div class="myheader" style="text-align: center">
      <br />
      <a href="http://www.data-to-viz.com"
        ><img
          align="left"
          src="https://github.com/holtzy/data_to_viz/raw/master/img/logo/typo.png"
          style="width: 150px; vertical-align: top; margin-left: 5%"
      /></a>
      <br /><br />
      <br /><br />
      <p class="mytitle">$mytitle$</p>
      <center>
        <div class="mysubtitle">
          <i
            >A collection of common
            <a href="https://www.data-to-viz.com/caveats.html"
              >dataviz caveats</a
            >
            by <a href="https://www.data-to-viz.com">Data-to-Viz.com</a></i
          >
        </div>
      </center>
      <br /><br />

      $if(myimage1)$
      <a href="http://www.data-to-viz.com">
        <img class="mylogoheader" src="$myimage1$"
      /></a>
      $endif$
    </div>

    $if(theme)$ $else$
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    $endif$ $for(author-meta)$
    <meta name="author" content="$author-meta$" />
    $endfor$ $if(date-meta)$
    <meta name="date" content="$date-meta$" />
    $endif$ $for(header-includes)$ $header-includes$ $endfor$ $if(highlightjs)$
    <style type="text/css">
      code {
        white-space: pre;
      }
    </style>
    $if(theme)$
    <style type="text/css">
      pre:not([class]) {
        background-color: white;
      }
    </style>
    $endif$
    <script type="text/javascript">
      if (window.hljs) {
        hljs.configure({ languages: [] });
        hljs.initHighlightingOnLoad();
        if (document.readyState && document.readyState === "complete") {
          window.setTimeout(function () {
            hljs.initHighlighting();
          }, 0);
        }
      }
    </script>
    $endif$ $if(highlighting-css)$
    <style type="text/css">
      code {
        white-space: pre;
      }
    </style>
    <style type="text/css">
      $highlighting-css$
      $if(code_folding)$
      div.sourceCode {
        overflow-x: visible;
      }
      $endif$
    </style>
    $if(theme)$
    <style type="text/css">
      pre:not([class]) {
        background-color: white;
      }
    </style>
    $endif$ $endif$ $if(abstract)$
    <style type="text/css">
      p.abstract {
        text-align: center;
        font-weight: bold;
      }
      div.abstract {
        margin: auto;
        width: 90%;
      }
    </style>
    $endif$ $if(theme)$
    <style type="text/css">
      h1 {
        font-size: 34px;
      }
      h1.title {
        font-size: 38px;
      }
      h2 {
        font-size: 30px;
      }
      h3 {
        font-size: 24px;
      }
      h4 {
        font-size: 18px;
      }
      h5 {
        font-size: 16px;
      }
      h6 {
        font-size: 12px;
      }
      .table th:not([align]) {
        text-align: left;
      }
      $if(source_embed)$
      #rmd-source-code {
        display: none;
      }
      $endif$
    </style>
    $endif$ $for(css)$
    <link
      rel="stylesheet"
      href="$css$"
      $if(html5)$$else$type="text/css"
      $endif$
    />
    $endfor$
  </head>

  <body>
    $if(theme)$
    <style type="text/css">
      .main-container {
        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
      }
      code {
        color: inherit;
        background-color: rgba(0, 0, 0, 0.04);
      }
      img {
        max-width: 100%;
        height: auto;
      }
      .tabbed-pane {
        padding-top: 12px;
      }
      button.code-folding-btn:focus {
        outline: none;
      }
    </style>

    $if(kable-scroll)$
    <style type="text/css">
      .kable-table {
        border: 1px solid #ccc;
        border-radius: 4px;
        overflow: auto;
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 20px;
        max-height: 350px;
      }

      .kable-table table {
        margin-bottom: 0px;
      }

      .kable-table table > thead > tr > th {
        border: none;
        border-bottom: 2px solid #dddddd;
      }

      .kable-table table > thead {
        background-color: #fff;
      }
    </style>
    $endif$ $if(navbar)$
    <style type="text/css">
      /* padding for bootstrap navbar */
      body {
        padding-top: $body_padding$px;
        padding-bottom: 40px;
      }
      /* offset scroll position for anchor links (for fixed navbar)  */
      .section h1 {
        padding-top: $header_padding$px;
        margin-top: -$header_padding$px;
      }

      .section h2 {
        padding-top: $header_padding$px;
        margin-top: -$header_padding$px;
      }
      .section h3 {
        padding-top: $header_padding$px;
        margin-top: -$header_padding$px;
      }
      .section h4 {
        padding-top: $header_padding$px;
        margin-top: -$header_padding$px;
      }
      .section h5 {
        padding-top: $header_padding$px;
        margin-top: -$header_padding$px;
      }
      .section h6 {
        padding-top: $header_padding$px;
        margin-top: -$header_padding$px;
      }
    </style>

    <script>
      // manage active state of menu based on current page
      $$(document).ready(function () {
        // active menu anchor
        href = window.location.pathname;
        href = href.substr(href.lastIndexOf("/") + 1);
        if (href === "") href = "index.html";
        var menuAnchor = $$('a[href="' + href + '"]');

        // mark it active
        menuAnchor.parent().addClass("active");

        // if it's got a parent navbar menu mark it active as well
        menuAnchor.closest("li.dropdown").addClass("active");
      });
    </script>

    $endif$

    <div class="container-fluid main-container">
      <!-- tabsets -->
      <script>
        $$(document).ready(function () {
          window.buildTabsets("$idprefix$TOC");
        });
      </script>

      <!-- code folding -->
      $if(code_menu)$
      <style type="text/css">
        .code-folding-btn {
          margin-bottom: 4px;
        }
      </style>
      <script>
        $$(document).ready(function () {
        $if(source_embed)$
          window.initializeSourceEmbed("$source_embed$");
        $endif$
        $if(code_folding)$
          window.initializeCodeFolding("$code_folding$" === "show");
        $endif$
        });
      </script>
      $endif$ $if(toc_float)$

      <script>
        $$(document).ready(function ()  {

            // move toc-ignore selectors from section div to header
            $$('div.section.toc-ignore')
                .removeClass('toc-ignore')
                .children('h1,h2,h3,h4,h5').addClass('toc-ignore');

            // establish options
            var options = {
              selectors: "$toc_selectors$",
              theme: "bootstrap3",
              context: '.toc-content',
              hashGenerator: function (text) {
                return text.replace(/[.\\/?&!#<>]/g, '').replace(/\s/g, '_').toLowerCase();
              },
              ignoreSelector: ".toc-ignore",
              scrollTo: 0
            };
        $if(toc_collapsed)$
            options.showAndHide = true;
        $else$
            options.showAndHide = false;
        $endif$
        $if(toc_smooth_scroll)$
            options.smoothScroll = true;
        $else$
            options.smoothScroll = false;
        $endif$

            // tocify
            var toc = $$("#$idprefix$TOC").tocify(options).data("toc-tocify");
        });
      </script>

      <style type="text/css">

        #$idprefix$TOC {
          margin: 25px 0px 20px 0px;
        }
        @media (max-width: 768px) {
        #$idprefix$TOC {
          position: relative;
          width: 100%;
        }
        }

        $if(toc_print)$
        $else$
        @media print {
        #$idprefix$TOC {
          display: none !important;
        }
        }
        $endif$

        .toc-content {
          padding-left: 30px;
          padding-right: 40px;
        }

        div.main-container {
          max-width: 1200px;
        }

        div.tocify {
          width: 20%;
          max-width: 260px;
          max-height: 85%;
        }

        @media (min-width: 768px) and (max-width: 991px) {
          div.tocify {
            width: 25%;
          }
        }

        @media (max-width: 767px) {
          div.tocify {
            width: 100%;
            max-width: none;
          }
        }

        .tocify ul, .tocify li {
          line-height: 20px;
        }

        .tocify-subheader .tocify-item {
          font-size: 0.90em;
          padding-left: 25px;
          text-indent: 0;
        }

        .tocify .list-group-item {
          border-radius: 0px;
        }

        $if(toc_collapsed)$
        $else$
        .tocify-subheader {
          display: inline;
        }
        .tocify-subheader .tocify-item {
          font-size: 0.95em;
        }
        $endif$
      </style>

      <!-- setup 3col/9col grid for toc_float and main content  -->
      <div class="row-fluid">
        <div class="col-xs-12 col-sm-4 col-md-3">
          <div id="$idprefix$TOC" class="tocify"></div>
        </div>

        <div class="toc-content col-xs-12 col-sm-8 col-md-9">
          $endif$ $endif$ $for(include-before)$ $include-before$ $endfor$
          $if(theme)$
          <div class="fluid-row" id="$idprefix$header">
            $if(code_menu)$
            <div class="btn-group pull-right">
              <button
                type="button"
                class="btn btn-default btn-xs dropdown-toggle"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                <span>Code</span> <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" style="min-width: 50px">
                $if(code_folding)$
                <li><a id="rmd-show-all-code" href="#">Show All Code</a></li>
                <li><a id="rmd-hide-all-code" href="#">Hide All Code</a></li>
                $if(source_embed)$
                <li role="separator" class="divider"></li>
                $endif$ $endif$ $if(source_embed)$
                <li><a id="rmd-download-source" href="#">Download Rmd</a></li>
                $endif$
              </ul>
            </div>

            $endif$ $endif$ $if(title)$
            <h1 class="title toc-ignore">$title$</h1>
            $if(subtitle)$
            <h3 class="subtitle"><em>$subtitle$</em></h3>
            $endif$ $for(author)$ $if(author.name)$
            <h4 class="author"><em>$author.name$</em></h4>
            $if(author.affiliation)$
            <address class="author_afil">
              $author.affiliation$<br />$endif$ $if(author.email)$
              <a class="author_email" href="mailto:#">$author.email$</a>
            </address>
            $endif$ $else$
            <h4 class="author"><em>$author$</em></h4>
            $endif$ $endfor$ $if(date)$
            <h4 class="date"><em>$date$</em></h4>
            $endif$ $if(abstract)$
            <div class="abstract">
              <p class="abstract">Abstract</p>
              $abstract$
            </div>
            $endif$ $endif$ $if(theme)$
          </div>
          $endif$ $if(toc_float)$ $else$ $if(toc)$
          <div id="$idprefix$TOC">$toc$</div>

          $endif$ $endif$ $body$ $if(theme)$ $if(toc_float)$
        </div>
      </div>
      $endif$

      <section
        id="form"
        style="
          margin-top: 70px;
          padding-bottom: 70px;
          padding-top: 70px;
          background-color: #f8f9fa;
        "
      >
        <div class="container">
          <div
            style="display: flex; flex-direction: column; align-items: center"
          >
            <h2 style="font-size: 44px" class="text-center">
              Dataviz decision tree
            </h2>
            <p class="text-center" style="max-width: 600px; font-size: 18px">
              <a href="https://www.data-to-viz.com">Data To Viz</a> is a
              comprehensive <b>classification of chart types</b> organized by
              data input format. Get a high-resolution version of our decision
              tree delivered to your inbox now!
            </p>
            <div
              style="
                margin-top: -50px;
                width: 100%;
                display: flex;
                justify-content: center;
              "
            >
              <script
                async
                data-uid="8010f15fd2"
                src="https://prodigious-trailblazer-3628.ck.page/8010f15fd2/index.js"
              ></script>
            </div>
            <br />
            <div class="text-center">
              <img
                class="img-fluid"
                src="../img/poster/poster_small.png"
                alt="High Resolution Poster"
                style="max-width: 400px"
              />
            </div>
          </div>
        </div>
      </section>

      $for(include-after)$ $include-after$ $endfor$
    </div>

    <script>
      // add bootstrap table styles to pandoc tables
      function bootstrapStylePandocTables() {
        $$('tr.header').parent('thead').parent('table').addClass('table table-condensed');
      }
      $$(document).ready(function () {
        bootstrapStylePandocTables();
      });

      $if(kable-scroll)$
      $$(document).ready(function () {
        $$('.knitsql-table').addClass('kable-table');
        var container = $$('.kable-table');
        container.each(function() {

          // move the caption out of the table
          var table = $$(this).children('table');
          var caption = table.children('caption').detach();
          caption.insertBefore($$(this)).css('display', 'inherit');
        });
      });
      $endif$
    </script>
    $endif$ $if(mathjax-url)$
    <!-- dynamically load mathjax for compatibility with self-contained -->
    <script>
      (function () {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "$mathjax-url$";
        document.getElementsByTagName("head")[0].appendChild(script);
      })();
    </script>
    $endif$
  </body>
</html>
